import React, { PureComponent } from 'react';
import { InputNumberC, SecuritiesCodeC, codeType, SelectC, TradingMarketC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, message } from 'antd';
import { connect } from 'dva';
import style from './myStyle.less';
import FormItemLayout from './formItemLayout';

class FundTransferC extends PureComponent {
  static defaultProps = {
    onRef: () => {},
  };
  state = {
    info: undefined, //etf详情
    type: undefined, //当前指令的类型type：1-指令新增   2-簿记新增    3-簿记详情
    jyfx: /^[1-9]\d*$/, //校验规则 与交易方向有关 可变更
    isCanOrder: true, //是否可以下达 默认可以下达
    fundType: 'gmjj', //基金类型 0-场外 1-ETF 'jj':'etf
    priceIsShow: 0,
  };
  componentDidMount() {
    this.props.onRef(this);
  }
  jyfxSelect = (e) => {
    if (e && e.value == 1) {
      this.setState(
        {
          jyfx: /^[1-9]\d*00$/,
        },
        () => {
          this.props.form.setFieldsValue({
            amount: undefined,
          }); //重新校验数量
        },
      );
    } else {
      this.setState(
        {
          jyfx: /^[1-9]\d*$/,
        },
        () => {
          this.props.form.setFieldsValue({
            amount: undefined,
          }); //重新校验数量
        },
      );
    }
  };
  calculateAmount = (val, type) => {
    // let val = e.target.value;
    const { priceIsShow } = this.state;
    const {
      form: { getFieldValue, setFieldsValue },
    } = this.props;
    let price = getFieldValue('price'); //价格
    let amount = getFieldValue('amount'); //数量
    let zlprice = getFieldValue('zlprice'); //金额
    if (type == 'price') {
      price = val;
    } else if (type == 'amount') {
      amount = val;
    } else {
      zlprice = val;
    }
    if (priceIsShow == 1) {
      if (price && price != '' && amount && amount != '') {
        const zlprice = price * amount;
        setFieldsValue({
          zlprice: zlprice,
        });
      } else {
        setFieldsValue({
          zlprice: undefined,
        });
      }
    } else {
      if (zlprice && zlprice != '' && amount && amount != '') {
        const price = zlprice / amount;
        setFieldsValue({
          price: price,
        });
      } else {
        setFieldsValue({
          price: undefined,
        });
      }
    }
  };
  //证券代码切换
  securitiesCodeChange = (value) => {
    const { form } = this.props;
    form.resetFields(['exchangecode']);
    this.props.tradingCodeOnChange(value);
    if (value) {
      this.setState({
        secuabbr: value.secuabbr,
      });
      form.setFieldsValue({
        exchangecode: `${value.exchangeCode}`,
      });
    } else {
      this.setState({
        secuabbr: undefined,
      });
    }
  };
  //获取当前表单信息
  getInfo = () => {
    let query;
    this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
      if (!err) {
        if (fieldsValue.amount && fieldsValue.amount > 1000000) {
          message.warning('数量不能大于一百万');
          return;
        }
        if (fieldsValue.zlprice && fieldsValue.zlprice == 0) {
          message.warning('金额不能为0');
          return;
        }
        //   fieldsValue.secuabbr = this.state.secuabbr;
        //   fieldsValue.parValueTotal = fieldsValue.zlprice;
        (fieldsValue.tradingcode = fieldsValue.zqdm.split('-')[1]),
          //   delete fieldsValue.zlprice;
          delete fieldsValue.zqdm;
        query = fieldsValue;
      }
    });
    return query;
  };
  fundTypeOnChange = (e) => {
    this.secucodeChild.setState({ dataSource: [] }); //清空证券代码的下拉
    this.secucodeChild.setSelect(null);
    this.props.form.setFieldsValue({
      exchangecode: undefined,
    });
    this.setState({
      fundType: e == 0 ? 'gmjj' : 'etf',
      priceIsShow: e,
    });
  };
  fundTypeSelectOnChange = (e) => {
    this.secucodeChild.setState({ dataSource: [] }); //清空证券代码的下拉
    this.secucodeChild.setSelect(null);
    this.props.form.setFieldsValue({
      exchangecode: undefined,
    });
    this.setState({
      fundType: e == 0 ? 'gmjj' : 'smjj',
    });
  };
  //form表单渲染
  formRender = () => {
    const { fundType, priceIsShow } = this.state;
    const fundList = [
      { value: 0, title: '场外' },
      { value: 1, title: 'ETF' },
    ];
    const OTCList = [
      { value: 0, title: '公募' },
      { value: 1, title: '私募' },
    ];
    return (
      <div>
        <Row className={style.mg5}>
          <Col span={24}>
            <SelectC
              form={this.props.form}
              dataIndex='fundType'
              title='基金类型'
              dataSource={fundList}
              initialValue={0}
              formItemLayout={FormItemLayout}
              onChange={this.fundTypeOnChange}
              rules={[{ required: true, message: '请选择基金类型' }]}
            />
          </Col>
          {priceIsShow == 0 && (
            <Col span={24}>
              <SelectC
                form={this.props.form}
                dataIndex='fundTypeSelect'
                title='场外类型'
                dataSource={OTCList}
                initialValue={0}
                formItemLayout={FormItemLayout}
                onChange={this.fundTypeSelectOnChange}
                rules={[{ required: true, message: '请选择场外类型' }]}
              />
            </Col>
          )}
          <Col span={24}>
            <SecuritiesCodeC
              form={this.props.form}
              dataIndex='zqdm'
              title='基金代码'
              extraLayout={FormItemLayout}
              onChange={(e) => this.securitiesCodeChange(e)}
              codeType={codeType[fundType]}
              onRef={(ref) => (this.secucodeChild = ref)}
              rules={[{ required: true, message: '请选择基金代码' }]}
            />
          </Col>
          <Col span={24}>
            <TradingMarketC
              form={this.props.form} // form对象
              title='交易市场' // 显示名称
              dataIndex='exchangecode' // Form识别的Item ID
              disabled={true}
              formItemLayout={FormItemLayout}
              rules={[{ required: true, message: '请选择' }]}
              marketType={['jys', 'yhj', 'cw', 'qt']}
            />
          </Col>
          <Col span={24}>
            <InputNumberC
              form={this.props.form} // form对象
              dataIndex={'amount'}
              title={'数量'}
              unit='股'
              min={0}
              max={999999999999}
              splitStyle={true}
              onChange={(val) => this.calculateAmount(val, 'amount')}
              formItemLayout={FormItemLayout}
              rules={[{ required: true, message: '请输入数量' }]}
            />
          </Col>
          <Col span={24}>
            <InputNumberC
              form={this.props.form} // form对象
              dataIndex={'price'}
              title={'价格'}
              unit='元'
              min={0.001}
              max={999999999999}
              splitStyle={true}
              rules={[{ required: true, message: '请输入价格' }]}
              onChange={(val) => this.calculateAmount(val, 'price')}
              formItemLayout={FormItemLayout}
              precision={3}
              disabled={priceIsShow == 0 ? true : false}
            />
          </Col>
          <Col span={24}>
            <InputNumberC
              form={this.props.form} // form对象
              dataIndex={'zlprice'}
              title={'金额'}
              unit='元'
              min={0.001}
              max={999999999999}
              splitStyle={true}
              formItemLayout={FormItemLayout}
              onChange={(val) => this.calculateAmount(val, 'zlprice')}
              rules={[{ required: true, message: '请输入金额' }]}
              precision={3}
              disabled={priceIsShow == 1 ? true : false}
            />
          </Col>
        </Row>
      </div>
    );
  };

  render() {
    return <div>{this.formRender()}</div>;
  }
}
export default connect(({ etfOrderM, loading }) => ({
  etfOrderM,
  loading,
}))(Form.create()(FundTransferC));
